<template>
    <div class="indexforhomeCintaoner">
        <homenav :flag="1"></homenav>
        <div class="swiperContainer">
            <el-carousel height="428px" :autoplay="true">
                <el-carousel-item v-for="(item,index) in swiperlist" :key="index">
                    <el-image @click="bigSwiperGoDetial(index)" :src="item"></el-image>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="goodswiperContainer">
            <div class="goodswiperItem" v-for="(item, index) in goodswiperList" :key="index">
                <el-carousel direction="vertical" :autoplay="true">
                    <el-carousel-item v-for="(items,indexs) in item.data" :key="indexs">
                        <el-image
                            style="width:100%;height:100%;"
                            @click="godetailswiper(item)"
                            :src="items.images"
                        ></el-image>
                    </el-carousel-item>
                </el-carousel>
                <div class="price">{{item.goodPrice}}￥</div>
                <div class="goodname">{{item.goodName}}</div>
            </div>
        </div>
        <div class="todayFav">
            <div class="texts">
                <span>今日星⭐推荐</span>
                <span @click="drawer = true">《如果》</span>
                <span @click="goproducts">查看更多>></span>
            </div>
            <div class="promoteList">
                <div class="promoteGoodsCard" v-for="(item, index) in toDayGoodsList" :key="index">
                    <img @click="godetail(item)" :src="item.goodCoverImg" alt />
                    <div class="promoteGoodName">
                        <el-rate v-model="item.value" :colors="colors"></el-rate>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="footertop">
                <div id="pieChart" class="chart-container"></div>
                <div id="echartTwo" class="echartTwo chart-container"></div>
                <!-- <div id="echartsThree" class="echartsThree chart-container"></div> -->
            </div>
            <div class="footerbottom">casso:1152283574@qq.com</div>
        </div>
        <el-drawer title="《如果》" show-close size="40%" :visible.sync="drawer" :direction="direction">
            <div class="textContainer">
                <p>If you can keep your head when all about you Are losing theirs and blaming it on you;</p>
                <span>如果周围的人毫无理性地向你发难，你仍能镇定自若保持冷静；</span>
                <p>If you can trust yourself when all men doubt you,But make allowance for their doubting too;</p>
                <span>如果众人对你心存猜忌，你仍能自信如常并认为他们的猜忌情有可原；</span>
                <p>If you can wait and not be tired by waiting,</p>
                <span>如果你肯耐心等待不急不躁，</span>
                <p>Or, being lied about, don't deal in lies,</p>
                <span>或遭人诽谤却不以牙还牙，</span>
                <p>Or, being hated, don't give way to hating,</p>
                <span>或遭人憎恨却不以恶报恶；</span>
                <p>And yet don't look too good, nor talk too wise;</p>
                <span>既不装腔作势，亦不气盛趾高；</span>
                <p>If you can dream - and not make dreams your master;</p>
                <span>如果你有梦想，而又不为梦主宰；</span>
                <p>If you can think - and not make thoughts your aim;</p>
                <span>如果你有神思，而又不走火入魔；</span>
                <p>If you can meet with Triumph and Disaster And treat those two impostors just the same;</p>

                <span>如果你坦然面对胜利和灾难，对虚渺的胜负荣辱胸怀旷荡；</span>
                <p>
                    If you can bear to hear the truth you've spoken
                    Twisted by knaves to make a trap for fools,
                </p>
                <span>如果你能忍受有这样的无赖，歪曲你的口吐真言蒙骗笨汉，</span>
                <p>
                    Or watch the things you gave your life to broken,
                    And stoop and build 'em up with worn-out tools;
                </p>
                <span>或看着心血铸就的事业崩溃，仍能忍辱负重脚踏实地重新攀登；</span>
                <p>
                    If you can make one heap of all your winnings
                    And risk it on one turn of pitch-and-toss,
                </p>
                <span>如果你敢把取得的一切胜利，为了更崇高的目标孤注一掷，</span>
                <p>
                    And lose, and start again at your beginnings
                    And never breathe a word about your loss;
                </p>
                <span>面临失去，决心从头再来而绝口不提自己的损失；</span>
                <p>
                    If you can force your heart and nerve and sinew
                    To serve your turn long after they are gone,
                </p>
                <span>如果人们早已离你而去，你仍能坚守阵地奋力前驱，</span>
                <p>
                    And so hold on when there is nothing in you
                    Except the Will which says to them:"Hold on";
                </p>
                <span>身上已一无所有，唯存意志在高喊“顶住”；</span>
                <p>If you can talk with crowds and keep your virtue,</p>
                <span>如果你跟平民交谈而不变谦虚之态，</span>
                <p>Or walk with kings - nor lose the common touch;</p>
                <span>亦或与王侯散步而不露谄媚之颜；</span>
                <p>If neither foes nor loving friends can hurt you;</p>
                <span>如果敌友都无法对你造成伤害；</span>
                <p>If all men count with you, but none too much;</p>
                <span>如果众人对你信赖有加却不过分依赖；</span>
                <p>
                    If you can fill the unforgiving minute
                    With sixty seconds' worth of distance run -
                </p>
                <span>如果你能惜时如金利用每一分钟不可追回的光阴；</span>
                <p>Yours is the Earth and everything that's in it,</p>
                <span>那么，你的修为就会如天地般博大，并拥有了属于自己的世界，</span>
                <p>And - which is more - you'll be a Man my son!</p>
                <span>更重要的是：孩子，你成为了真正顶天立地之人！</span>
            </div>
        </el-drawer>
    </div>
</template>

<script>
// import homenav from "../common/homenav.vue";
const homenav = () => import('../common/homenav.vue')
import Echarts from "echarts";
//  https://www.jianshu.com/p/3f5e74be90c8
export default {
    data() {
        return {
            swiperlist: [
                "https://res.vmallres.com/pimages//pages/picImages/Iz7W3hRLHKpsmknJhPXN.jpg",
                "https://res.vmallres.com/pimages//pages/picImages/TPCncl2RJtPp7EOisALb.jpg",
                "https://res.vmallres.com/pimages//pages/picImages/gJE9Dw2Mu8IYmX7wGIZN.jpg",
                "https://res.vmallres.com/pimages//pages/picImages/Wuc6htrpYAjkcSkbzaQY.jpg",
                "https://res.vmallres.com/pimages//pages/picImages/FBTZIpSDClwTinLodsYR.jpg",
                "https://res.vmallres.com/pimages//pages/picImages/9B2RNZGtUBDRZuH1poB0.jpg",
                "https://res.vmallres.com/pimages//pages/picImages/DrHW4emivdwhqNf3b08e.jpg"
            ],
            goodswiperList: [], // 1/61/78/124/143/154/170/314/450/396/376
            chiosingGoodId: [1, 376, 396, 61, 78, 450, 124, 314, 143, 170, 154],
            todayid: [50, 150, 200, 250, 300, 350, 400, 450],
            toDayGoodsList: [],
            colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
            pieCharts: null,
            pieCharts2: null,
            echartsThree: null,
            pieOption: {
                title: {
                    text: "2020新品占比"
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b}: {d}%"
                },
                series: [
                    {
                        name: "产品系列",
                        type: "pie",
                        roseType: "angle",
                        label: {
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: "30",
                                    fontWeight: "bold"
                                }
                            }
                        },
                        data: [
                            { value: 33.3, name: "手机" },
                            { value: 20.8, name: "平板" },
                            { value: 14.9, name: "运动" },
                            { value: 7.9, name: "智能家居" },
                            { value: 7.6, name: "学习工具" },
                            { value: 11.9, name: "电脑" },
                            { value: 2.9, name: "儿童" }
                        ]
                    }
                ]
            },
            barOption: {
                title: {
                    text: "新品年份分布",
                    textAlign: "auto"
                },
                tooltip: {
                    trigger: "axis"
                },
                toolbox: {
                    feature: {
                        magicType: { type: ["line", "bar"] },
                        saveAsImage: {}
                    },
                    right: 60,
                    top: 30
                },
                xAxis: {
                    type: "category",
                    name: "类目",
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                    shadowBlur: 10,
                    shadowOffsetX: 15
                },
                yAxis: {
                    type: "value",
                    axisLabel: {
                        formatter: "{value} (个/件)"
                    }
                },
                dataset: {
                    // 提供一份数据。
                    source: [
                        ["products", "2018", "2019", "2020", "2021", "2022"],
                        ["手机", "386", "320", "420", "289", "120"],
                        ["平板", "125", "120", "51", "98", "150"],
                        ["运动", "200", "123", "240", "60", "95"],
                        ["智能家居", "23", "45", "67", "42", "23"],
                        ["学习工具", "95", "100", "75", "76", "23"],
                        ["电脑", "302", "263", "289", "120", "105"],
                        ["儿童", "56", "23", "45", "89", "100"]
                    ]
                },
                series: [
                    { type: "bar" },
                    { type: "bar" },
                    { type: "bar" },
                    { type: "bar" },
                    { type: "bar" }
                ],
                legend: {
                    show: true
                }
            },
            lineOption: {
                xAxis: {
                    type: "category",
                    data: [
                        "手机",
                        "平板",
                        "运动",
                        "智能家居",
                        "学习工具",
                        "电脑",
                        "儿童"
                    ]
                },
                yAxis: {
                    type: "value"
                },
                series: [
                    {
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: "line"
                    }
                ]
            },
            drawer: false,
            direction: "ltr"
        };
    },
    components: {
        homenav
    },
    methods: {
        // 修改接口，获取商品轮播图片时也返回商品名跟价格
        getChoisingGoods(idList, containerArr) {
            idList.forEach(item => {
                this.$ajax
                    .get("/goodsdetialimages/?goods=" + item)
                    .then(res => {
                        let goodPrice = res.data.results[0].goods.goodPrice;
                        let goodName = res.data.results[0].goods.goodName;
                        let obj = {
                            data: res.data.results,
                            goodPrice,
                            goodName
                        };
                        containerArr.push(obj);
                    });
            });
        },
        // 星推荐列表
        getTodayFavList() {
            this.todayid.forEach(item => {
                this.$ajax("/goods/" + item).then(res => {
                    // console.log(res.data);
                    res.data.value = 5;
                    this.toDayGoodsList.push(res.data);
                });
            });
            // console.log(this.toDayGoodsList);
        },
        // 推荐到详细
        godetail(item) {
            this.$router.push({ name: "details", params: { id: item.id } }); // 这里使用路由传参的方式将id传到详细页
        },
        // small轮播到详细
        godetailswiper(item) {
            this.$router.push({
                name: "details",
                params: { id: item.data[0].goods.pk }
            });
        },
        // 大轮播图到详细
        bigSwiperGoDetial(index) {
            let id = (index + 1) * 8 + 15;
            this.$router.push({ name: "details", params: { id: id } });
        },
        // 去产品页
        goproducts() {
            this.$router.push({ name: "products" });
        }
    },
    mounted() {
        this.getChoisingGoods(this.chiosingGoodId, this.goodswiperList);
        this.getTodayFavList();
        this.pieCharts = Echarts.init(document.getElementById("pieChart"));
        this.pieCharts.setOption(this.pieOption);
        this.pieCharts2 = Echarts.init(document.getElementById("echartTwo"));
        this.pieCharts2.setOption(this.barOption);
        // this.echartsThree = Echarts.init(
        //     document.getElementById("echartsThree")
        // );
        // this.echartsThree.setOption(this.lineOption);
    }
};
</script>


<style lang="scss" scoped>
.chart-container {
    border-radius: 4px;
    height: 200px;
    background: #fff;
    box-shadow: 0 1px 10px 2px rgba(182, 191, 196, 0.5);
    padding: 20px;
}
.indexforhomeCintaoner {
    margin-top: 76px;
    .goodswiperContainer {
        width: 60%;
        min-width: 950px;
        margin: 5px auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .goodswiperItem {
            width: 30%;
            margin: 10px;
            padding: 5px;
            height: 360px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            .price {
                font-size: 14px;
                color: red;
                opacity: 0.5;
                text-align: center;
            }
            .goodname {
                font-size: 12px;
                opacity: 0.8;
                text-align: center;
                font-style: italic;
            }
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .todayFav {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        margin-top: 50px;
        padding: 15px;
        .texts {
            display: flex;
            justify-content: space-around;
            padding: 10px;
            background-color: #67c23a;
            opacity: 0.8;
            span:nth-child(1) {
                font-size: 16px;
                opacity: 0.7;
            }
            span:nth-child(1):hover {
                opacity: 1;
            }
            span:nth-child(2) {
                font-size: 13px;
                color: blue;
                opacity: 0.8;
                cursor: pointer;
            }
            span:nth-child(3) {
                font-size: 13px;
                color: blue;
                opacity: 0.8;
                cursor: pointer;
            }
            span:nth-child(2):hover {
                opacity: 1;
            }
        }
        .promoteList {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            height: 150px;
            min-width: 1180px;
            padding-top: 5px;
            .promoteGoodsCard {
                height: 130px;
                width: 140px;
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                cursor: pointer;
                img {
                    width: 100%;
                    height: 100%;
                }
                .promoteGoodName {
                    margin-top: 10px;
                    font-size: 12px;
                    text-align: center;
                    opacity: 0.5;
                }
            }
        }
    }
    .footer {
        background-color: #f9f9f9;
        height: 350px;
        margin-top: 20px;
        .footertop {
            display: flex;
            justify-content: space-around;
            div {
                width: 45%;
                display: flex;
                justify-content: center;
            }
        }
        .footerbottom {
            text-align: center;
            margin-top: 40px;
            font-size: 1.5rem;
            opacity: 0.6;
        }
    }
}
.textContainer {
    padding-left: 20px;
    overflow-y: scroll;
    p {
        font-size: 13px;
        opacity: 0.8;
    }
    span {
        font-size: 12px;
        font-style: italic;
        opacity: 0.5;
        display: none;
    }
}
</style>



